<template>
  <view>
    <view class="popups-content">
      <view style="text-align: center;">
        支付方式
      </view>
      <view class="">
        <uni-data-checkbox v-model="modeOfPayment" :localdata="paymentamount"></uni-data-checkbox>
      </view>
      <view class="payment-button">
        <button @click="immediatePayment">立即支付</button>
      </view>
    </view>
    <!-- 余额支付 -->
    <u-popup v-model="payShow" mode="bottom" height="900" border-radius="40">
      <PayKeyboard ref="payKeyboardRef" @payWordpass="getPayWordpass"></PayKeyboard>
    </u-popup>
  </view>
</template>

<script>
export default {
  data() {
    return {
      payShow: false,
      // 支付列表
      paymentamount: [{
        text: '微信支付',
        value: 0
      },
      {
        text: '余额支付',
        value: 1
      },
      ],
      out_trade_no: '',
      // 支付方式
      modeOfPayment: 0
    }
  },
  methods: {

    // 立即支付
    immediatePayment() {
      // 微信支付
      if (this.modeOfPayment == 0) {
        $api.postOrderGoodsPayment({
          out_trade_no: this.out_trade_no,
          pay_type: 'wechatpay',
          is_matched: 0,
        }).then(res => {
          let obj = res.data.data.data
          this.popups = false
          uni.requestPayment({
            provider: 'wxpay',
            timeStamp: obj.timeStamp,
            nonceStr: obj.nonceStr,
            package: obj.package,
            signType: obj.signType,
            paySign: obj.paySign,
            success: function (res) {
              uni.redirectTo({
                url: '/pages/Paymentcompletion/Paymentcompletion?source=' + 1
              })
            },
            fail: function (err) {
              uni.navigateTo({
                url: '/pages/Paymentcompletion/Paymentcompletion?source=' + 2
              })
            }
          });
        })
      } else {
        // 余额支付
        this.payShow = true
        this.popups = false
        this.$refs.payKeyboardRef.onPayUp();
      }

    },

    //获取余额支付支付密码
    getPayWordpass(wordpass) {
      $api.checkpaypassword({ pay_password: wordpass }).then(res => {
        $api.postOrderGoodsPayment({
          out_trade_no: this.out_trade_no,
          pay_type: 'BALANCE',
          is_matched: 0,
        }).then(res => {
          this.payShow = false
          uni.navigateTo({
            url: '/pages/Paymentcompletion/Paymentcompletion?source=' + 1
          })
        })
      }).catch(err => {
        console.log(err);
      })
    },
  },
}
</script>

<style scoped lang='less'>
// 支付弹窗
.popups-content {
  width: 750rpx;
  position: relative;
  border-radius: 40px;
  padding-top: 30rpx;


  ::v-deep .checklist-group {
    width: 100%;
    height: 80rpx;
    margin: 20rpx 30rpx;

    .checklist-box {
      display: block;
      width: 100%;
      height: 49.3rpx;
      margin-bottom: 30rpx;

      .checklist-content {
        float: left;
        font-size: 30rpx;
        font-family: PingFang SC;
        font-weight: 400;
        color: #333333;
        line-height: 121rpx;
      }

      .radio__inner {
        float: right;
      }
    }

    .is-checked {
      color: #F14500 !important;
    }
  }

  .payment-button {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 30rpx 0 62rpx 0;
    margin-top: 80rpx;

    button {
      width: 664.4rpx;
      height: 88.5rpx;
      background-color: #f14500;
      color: #fff;
      font-size: 30rpx;
      font-family: PingFang SC;
      font-weight: 500;
      color: #FFFFFF;
      border-radius: 44rpx;
      line-height: 88.5rpx;
    }
  }
}
</style>
